<template>
  <div>
    <Row>
      <i-col span="24" style="text-align: right">
        <Button type="ghost" class="y_condition" style="color: #757575" @click="showDecrypted" v-show="isHasRole">解密指纹信息</Button>
        <Button type="primary" icon="md-add" class="y_condition" @click="add" v-has=tRole.OTHER_2_101 v-show="isHasRole">新增电脑指纹</Button>
      </i-col>
    </Row>
    <hr>
    <Row>
      <i-col span="24" style="text-align: right" >
        <Input placeholder="员工名称/电脑编号/指纹" v-model.trim="param.searchParams.keyWord" clearable class="y_condition"></Input>
        <Button type="primary" icon="md-search" class="y_condition" @click="webList">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table"-->
<!--           :columns="tableTitles" :data="terminalMarkList"-->
<!--           no-data-text="暂无数据"></Table>-->

      <List size="small" border style="margin:0.5rem;text-align: left">
        <div v-if="terminalMarkList==null || terminalMarkList.length==0">
          <ListItem>
            <div style="width: 100%; text-align: center;">暂无数据</div>
          </ListItem>
        </div>
        <div v-else>
        <ListItem v-for="(item,index) in terminalMarkList" class="item_hover">
          <i-col flex="auto">
            <div style="font-weight: bold">
              <KeyValueView >{{'#'+index}}</KeyValueView>
            </div>
            <KeyValueView title="浏览器指纹"  >
                <Tooltip :content="item.borwerFinger"  transfer>
                  {{$tiyHideUsername(item.borwerFinger)}}
                </Tooltip>
            </KeyValueView>
            <KeyValueView title="浏览器"  >
              {{item.borwerName}}
            </KeyValueView>
            <KeyValueView title="终端编号"  >
              {{item.terminalNo}}
            </KeyValueView>
            <KeyValueView title="终端类型"  >
              <span v-text="item.terminalType==1?'电脑':'手机'"></span>
            </KeyValueView>
            <KeyValueView title="备注"  >
              {{item.remark}}
            </KeyValueView>
            <KeyValueView title="创建时间" oneline >
              <span v-text="$tiyBJTime(item.createtime)"></span>
            </KeyValueView>
          </i-col>
          <i-col >
            <div class="item_bottom" style="padding: 0.5rem " >
              <i-button type="primary" size="small"  icon="ios-create" style="marginRight: 10px;marginTop:6px;marginBottom:6px" @click="modify(index)">编辑</i-button>
              <i-button type="error" size="small" icon="md-trash"  style="marginRight: 10px;marginTop:6px;marginBottom:6px" @click="deleteAction(item.id)">删除</i-button>
            </div>
          </i-col>
        </ListItem>
        </div>
      </List>



    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>

    <Modal
      v-model="status.modifyModal.isShow"
      :title="status.modifyModal.title"
      :loading="status.modifyModal.isLoading"
      @on-ok="addEditTerminalMark"
      :scrollable="true">
      <Form :model="param.terminalMark"  :label-width="120"
            ref="terminalMarkForm"  :rules="terminalMarkRules"
            style="margin:2rem 0px 1rem 0px">
            <FormItem label="终端所属 :" v-show="param.terminalMark.id == ''">
              <RadioGroup v-model="param.terminalMark.computeBy" v-show="param.terminalMark.id == ''">
                <Radio label="公司" ></Radio>
                <Radio label="个人"></Radio>
              </RadioGroup>
              <span v-show="param.terminalMark.id != ''">{{param.terminalMark.computeBy}}</span>
            </FormItem>
          <FormItem label="终端类型 :">
            <RadioGroup v-model="param.terminalMark.terminalType" v-show="param.terminalMark.id == ''">
              <Radio label="1">电脑</Radio>
              <Radio label="2">手机</Radio>
            </RadioGroup>
            <span v-show="param.terminalMark.id != ''">{{param.terminalMark.terminalType == "1" ? "电脑" :"手机"}}</span>
          </FormItem>
            <FormItem label="终端编号 :" prop="terminalNo">
              <Input v-model.trim="param.terminalMark.terminalNo" placeholder="请输入" class="form_step" v-show="param.terminalMark.id == ''"></Input>
              <span v-show="param.terminalMark.id != ''">{{param.terminalMark.terminalNo}}</span>
            </FormItem>
            <FormItem label="浏览器名称 :">
              <RadioGroup v-model="param.terminalMark.borwerName" v-show="param.terminalMark.id == ''">
                <Radio label="Chrome" ></Radio>
                <Radio label="Safari"></Radio>
                <Radio label="360浏览器"></Radio>
              </RadioGroup>
              <span v-show="param.terminalMark.id != ''">{{param.terminalMark.borwerName}}</span>
            </FormItem>
            <FormItem label="浏览器指纹 :" prop="borwerFinger">
              <Input v-model.trim="param.terminalMark.borwerFinger"  placeholder="请输入" class="form_step" v-show="param.terminalMark.id == ''"></Input>
              <span v-show="param.terminalMark.id != ''">{{param.terminalMark.borwerFinger}}</span>
            </FormItem>
            <!-- <FormItem label="ip :">
              <Input v-model.trim="param.terminalMark.ip"  placeholder="请输入" class="form_step"></Input>
            </FormItem> -->
            <FormItem label="备注说明 :">
              <Input v-model.trim="param.terminalMark.remark" placeholder="请输入" class="form_step"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      @on-ok="webDelete">
      <br>
      <p>确定删除电脑标记?</p>
      <br>
    </Modal>
    <Modal
      v-model="status.decryptedModal.isShow"
      width="60%"
      title="解密信息"
      @on-ok="decryptedComputeInfo">
      <div>
        <Form  :label-width="120" style="margin:1rem 0px 1rem 0px">
          <FormItem label="加密信息 :"  inline>
            <Input v-model.trim="param.decryptedComputeInfo.computeInfo" :rows="6" type="textarea" style="width:80%" class="modal_newuser_form_input"></Input>
          </FormItem>
          <FormItem label="解密密码 :"  inline>
            <Input v-model.trim="param.decryptedComputeInfo.key" style="width:80%" class="modal_newuser_form_input"></Input>
          </FormItem>

          <FormItem label="解密后信息 :"  inline>
            <span style="width:80%" class="modal_newuser_form_input">{{param.decryptedComputeInfo.decrypted}}</span>
          </FormItem>
        </Form>

      </div>
      <div slot="footer">
        <Button class="tiy_btn" @click="status.decryptedModal.isShow = false">取消</Button>
        <Button type="primary" class="tiy_btn" @click="decryptedComputeInfo">解密</Button>
      </div>
    </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  //简单 aes加密
  import SimpleCrypto from "simple-crypto-js";
  import tiyData from "./js/terminal/terminal_mark_data";
  import {webList,init,saveTerminalMark,modifyTerminalMark,deleteTerminalMark,webDeleteTerminalMark} from "./js/terminal/terminal_mark_fun";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
      	// postageMethodDict:[],
        tRole:{
          OTHER_2_101: "OTHER-2-101"
        },
        page: tiyData.tPage,
        terminalMarkList: tiyData.tData.terminalMarkList,
        status: tiyData.tStatus,
        param: tiyData.tParam,
        isHasRole: true,
        terminalMarkRules:tiyData.tStatus.terminalMarkRules,
        tableTitles:tiyData.listTableTitles(this),


      }
    },
    computed: {


    },
    methods: {

      webList(){
        if (tiyData.tParam.searchParams.keyWord.toLowerCase() == 	"f8c2d32c51c615438cf6fa4d709d2f90"){
          this.isHasRole = true;
        }else {
          webList(this,tiyData);
        }
       },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
     add(){
       this.$refs['terminalMarkForm'].resetFields();
       tiyData.tParam.terminalMark.id = "";
       tiyData.tParam.terminalMark.ip = "";
       tiyData.tParam.terminalMark.employeeAccount = "";
       tiyData.tParam.terminalMark.borwerFinger = "";
       tiyData.tParam.terminalMark.borwerName = "Chrome";
       tiyData.tParam.terminalMark.terminalNo = "";
       tiyData.tParam.terminalMark.computeBy = "公司";
       tiyData.tParam.terminalMark.terminalType = "1";
       tiyData.tParam.terminalMark.remark = "";

       tiyData.tParam.terminalMark.startEndTime.length = 0;
       let startDate = new Date(new Date());
       let endDate = new Date(new Date(new Date().getTime() + 60 * 60 * 1000));
       tiyData.tParam.terminalMark.startEndTime.push(new Date());
       tiyData.tParam.terminalMark.startEndTime.push(new Date(new Date().getTime() + 60 * 60 * 1000));
       tiyData.tParam.terminalMark.effectiveTime = -1;
       tiyData.tParam.terminalMark.expireTime = -1;
       tiyData.tParam.terminalMark.isLongTerm = true;
       tiyData.tParam.terminalMark.employeeId = "";
       tiyData.tParam.terminalMark.employeeName = "";
       tiyData.tStatus.modifyModal.isShow=true;
       tiyData.tStatus.modifyModal.title="新增电脑浏览器指纹";
      },
      deleteAction(id){
        deleteTerminalMark(this,tiyData,id);
      },
      webDelete(){
          webDeleteTerminalMark(this,tiyData);
      },
      modify(index){
        modifyTerminalMark(this,tiyData,index);
      },
      addEditTerminalMark(){
        saveTerminalMark(this,tiyData);
      },
      chooseTimeType(isLongTerm){
        if(isLongTerm){
          tiyData.tParam.terminalMark.effectiveTime = -1;
          tiyData.tParam.terminalMark.expireTime = -1;
        }else{
          let startDate = new Date(tiyData.tParam.terminalMark.startEndTime[0]);
          let endDate = new Date(tiyData.tParam.terminalMark.startEndTime[1]);
          tiyData.tParam.terminalMark.effectiveTime = Date.UTC(startDate.getFullYear(),startDate.getMonth(),startDate.getDate(),startDate.getHours());
          tiyData.tParam.terminalMark.expireTime = Date.UTC(endDate.getFullYear(),endDate.getMonth(),endDate.getDate(),endDate.getHours());
        }
      },
      chooseExpireTime(date){
        let startDate = new Date(date[0]);
        let endDate = new Date(date[1]);
        tiyData.tParam.terminalMark.startEndTime = date;
        tiyData.tParam.terminalMark.effectiveTime = Date.UTC(startDate.getFullYear(),startDate.getMonth(),startDate.getDate(),startDate.getHours());
        tiyData.tParam.terminalMark.expireTime = Date.UTC(endDate.getFullYear(),endDate.getMonth(),endDate.getDate(),endDate.getHours());
      },
      showDecrypted(){
        tiyData.tStatus.decryptedModal.isShow = true;
        tiyData.tParam.decryptedComputeInfo.computeInfo = "";
        tiyData.tParam.decryptedComputeInfo.decrypted = "";
      },
      decryptedComputeInfo(){
        if (tiyData.tParam.decryptedComputeInfo.key == ""){
          this.$Message.error({content:"密码不能为空"})
        }else {
          if(tiyData.tParam.decryptedComputeInfo.key != this.$tiyAesDey()){
            this.$Message.error({content:"密码不正确"})
          }else {
            var simpleCrypto = new SimpleCrypto(tiyData.tParam.decryptedComputeInfo.key);
            var result = simpleCrypto.decrypt(tiyData.tParam.decryptedComputeInfo.computeInfo);
            tiyData.tParam.decryptedComputeInfo.decrypted = result == "" ? "解密失败" : result;

          }
        }

      }
    },
    mounted(){
      init(this,tiyData);
      // webList(this,tiyData);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
  @import  (once,optional)  "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }
  .disSelect {
    background-color: #dbdbdb;
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
  .itemChecked{
    background-color:#FDBDBD
  }
  .form_step {
    width:80%;
  }
  .postageRules_step {
    width:105px;
  }
  .postageRules_step_price {
    width:80px;
  }
  .postageRules_label {
    width:20%;
  }

  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }
  }

  .countrySelected{
    background-color:#EDE7F6
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .ivu-form-item-content {
    margin-left: 80px !important
  }
  .key{
   .tiy_key;
    text-align: right;
  }

</style>
